<template>
  <div>
    <div class="head"><router-link class="operating" tag="span" to="/Login">{{$t('FindPwdAux.v1')}}</router-link></div>
    <div class="overlay"><div class="overlay-content scrolling">123</div></div>
    <van-popup v-model="show" style="width: 100%;height: 100%;border-radius: 5px;background: #2c3145;text-align: left;" :close-on-click-overlay="false">
      <div style="padding: 10px;color:white;background: #2c3145;text-align: left;" @click="exit"><van-icon name="arrow-left" size="26" /></div>
      <div style="color: white;font-size: 13px;background: #2c3145;">
        <div align="center" style="padding-top: 20px;padding-bottom: 10px;margin-left: 15px;margin-right: 15px;">
          <img src="../assets/images/sure.png" style="width: 80px;height: 80px;padding-bottom: 10px;" />
          <div style="font-size: 16px;">{{$t('FindPwdAux.v2')}}</div>
          <div style="padding-top: 10px;font-size: 14px;color: rgb(183,183,183);">{{$t('FindPwdAux.v3')}}</div>
        </div>
        <div style="padding: 15px;" v-if="listArr != ''">
          <div style="border-top: 1px solid rgba(93,107,151,0.5);">
            <van-grid :column-num="3">
              <van-grid-item v-for="(item, index) in list2" :key="Math.random()">
                <div class="yellow" style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;">
                  <span v-text="item" @click="setActive2(item, index)"></span>
                </div>
              </van-grid-item>
            </van-grid>
          </div>
        </div>
        <van-cell-group class="two" style="background: #2C3145;color: #858dac;padding: 10px 15px;padding-top: 0px;" v-if="list != '' && list != null">
          <div style="color: white;font-size: 13px;background: #2c3145;border-top: 1px solid rgba(93,107,151,0.5);padding-bottom: 10px;">
            <van-grid :column-num="3">
              <van-grid-item v-for="(item, index) in list" :key="Math.random()" v-if="listArr.indexOf(index) == -1">
                <div :class="{'red': listArr.indexOf(index) != -1}" style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;">
                  <span v-text="item" @click="setActive(item, index)"></span>
                </div>
              </van-grid-item>
            </van-grid>
          </div>
        </van-cell-group>
        <div style="padding: 10px 20px;">
          <van-button slot="button" size="normal" type="info" style="height: 38px;line-height: 36px;" @click="zjcSure" :disabled="indexType">{{$t('FindPwdAux.v4')}}</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
let _this;
import { base } from './../utils/api';
import { debounce } from './../utils/debounce'; // 函数节流-高频操作需要
import { base64 } from 'vux';
export default {
  name: 'FindPwdAux',
  data() {
    return {
      loading: false,
      list: [],
      list2: [],
      listArray: [],
      listString: '',
      oc: '',
      listArr: [],
      show: true,
      indexType: true
    };
  },
  beforeCreate() {
    _this = this;
  },
  created() {},
  mounted() {
    if (sessionStorage.getItem('list')) {
      this.list = JSON.parse(sessionStorage.getItem('list'));
    }
    if (sessionStorage.getItem('listString')) {
      sessionStorage.removeItem('listString');
    }
  },
  methods: {
    setActive(item, index) {
      this.oc = index;
      if (this.listArr.includes(index)) {
        this.listArr.splice(this.listArr.indexOf(index), 1);
        this.listArray.splice(this.listArray.indexOf(item), 1);
        this.list2.splice(this.listArray.indexOf(item), 1);
      } else {
        this.listArr.push(index);
        this.listArray.push(item);
        this.list2.push(item);
      }
      this.listString = this.listArray.join(' ');
      if (this.listArray.length == 12) {
        this.indexType = false;
      } else {
        this.indexType = true;
      }
    },
    setActive2() {
      this.list2 = [];
      this.listArr = [];
      this.listArray = [];
      this.listString = '';
    },
    zjcSure() {
      // 确定助记词
      base
        .getUserNameZJC2({
          // 判断助记词是否正确
          userName: base64.decode(this.$route.query.code),
          auxiliaries: this.listString
        })
        .then(res => {
          if (res.code == 200) {
            this.$router.push({
              path: '/FindPwd',
              query: {
                list: sessionStorage.setItem('listString', this.listString),
                code: this.$route.query.code
              }
            });
          } else {
            this.$toast(res.msg);
          }
        });
    },
    exit() {
      // 助记词返回按钮
      this.$router.push({
        path: '/FindPwd'
      });
    }
  },
  watch: {}
};
</script>

<style lang="less" scoped="scoped">
.title {
  font-size: 15px;
  padding: 10px;
  text-align: right;
}

.title-hd {
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
}

.weui-cells:after {
  left: 15px;
  right: 15px;
}

.weui-cells .weui-cell {
  padding: 15px 0;
}

.main {
  margin: 0 20px;
  overflow: hidden;
}

.btn {
  padding: 20px;
}

.text {
  color: #636363;
  padding: 20px;
  text-align: center;
  font-size: 13px;
}

.logo {
  width: 30%;
  display: block;
  margin: 10px auto;
}

.qr {
  position: absolute;
  right: 0;
  top: 0;
  img {
    width: 26px;
    padding: 12px;
  }
}

.Protocol {
  padding: 10px 20px;
  font-size: 12px;
  min-height: 24px;
  span {
    text-decoration: underline;
    color: #3673f7;
  }
}

/deep/ .weui-icon-circle {
  font-size: 17px;
}

/deep/ .weui-icon-success {
  font-size: 17px;
}

/deep/ .vux-check-icon > .weui-icon-success:before,
.vux-check-icon > .weui-icon-success-circle:before {
  color: #5571f8;
}

/deep/ .weui-btn_plain-primary {
  color: #5571f8;
  border-color: #5571f8;
}

/deep/ .weui-btn_mini {
  font-size: 12px !important;
}

// 用户协议
.checkPopup {
  font-size: 14px;
  h2 {
    text-align: center;
    padding: 10px 0;
  }
  .checkContent {
    padding: 0 10px 10px;
  }
}

input {
  padding: 15px 10px;
}

.head ~ .overlay {
  top: 45px;
}

.text {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #ffffff;
}

.logo {
  width: 30%;
  display: block;
  margin: 5% auto 5%;
}

.title-hd {
  font-size: 20px;
  font-weight: bold;
  padding: 5px 20px 20px;
}

/deep/.vux-x-input.disabled .weui-input {
  text-fill-color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/deep/ .van-grid-item__content {
  background: #2c3145;
  padding: 15px 15px 5px 0px;
}

/deep/ .van-hairline--top::after {
  border: 0;
}

/deep/ .van-grid-item__content::after {
  border: 0;
}

/deep/ .van-grid-item__content {
  float: left;
}

.red {
  border: 1px solid #3fb776 !important;
  background: #3fb776 !important;
}

.yellow {
  border: 1px solid rgb(93, 107, 151) !important;
  background: rgb(93, 107, 151) !important;
}

.two[class*='van-hairline']::after {
  border: 0;
}
</style>
